<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>支分宝</title>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/api.css" />
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/aui.css" />
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/swiper.min.css" />
  <style>
    body,
    html {
      width: 100%;
      height: 100%;
      background: #F5F5F5;
    }

    .left img {
      width: 0.65rem;
      height: 1.1rem;
    }

    .quesheng {
      width: 100%;
      padding-top: 4.75rem;
    }

    .quesheng img {
      width: 4.775rem;
      height: 9.55rem;
      margin: 0 auto;
    }

    .quesheng .word {
      margin-top: 1.1rem;
      color: #1AA6F0;
      text-align: center;
    }

    .center {
      padding-top: 0.6rem;
      padding-left: 0.75rem;
      /* padding-right: 0.75rem; */
      padding-bottom: 1rem;
      display: flex;
      background: #ffffff;
    }

    .tou_left {
      margin-right: 0.6rem;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .tou {
      width: 2rem;
      height: 2rem;
      margin-bottom: 0.325rem;
      border-radius: 50%;
    }

    .city_name {
      width: 3.1rem;
      height: 0.85rem;
      position: relative;

    }

    .city_bg {
      width: 3.1rem;
      height: 0.85rem;
    }

    .city_name .city_bg_con {
      position: absolute;
      font-size: 0.45rem;
      color: #FF5E00;
      top: 0.07rem;
      left: 0.375rem;
    }

    .su {
      height: 0.75rem;
      width: 0.04rem;
      background: #E0E0E0;
      margin-left: 0.6rem;
      margin-right: 0.6rem;
    }

    .info_right {
      display: flex;
      flex-direction: column;

    }



    .shop_name {
      width: 12.6rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

    }

    .article {
      display: flex;
      flex-direction: column;
      background: #ffffff;
      font-size: 0.7rem;
      color: #333333
    }

    .hr {
      background: #F5F5F5;
      height: 0.55rem;
    }

    .hr1 {
      background: #E0E0E0;
      height: 0.04rem;
    }

    .article_con {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    .goods_pic {
      width: 100%;
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      /* justify-content: space-between; */
      margin-bottom: 0.625rem;
    }

    .goods_pic1 {
      width: 100%;
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 0.625rem;

    }

    .heng {
      width: 100%;
      height: 1rem;
      color: #E0E0E0
    }

    .lun {
      display: flex;
      align-items: center;
      padding-top: 0.65rem;
      padding-bottom: 0.65rem;
    }

    .bottom {
      display: flex;
      padding-left: 1.85rem;
      padding-right: 1.85rem;
      justify-content: space-between;
    }

    .pic_can {
      position: relative;
      width: 10rem;
      height: 10rem;
    }

    #vedio {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .play {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2rem;
      height: 2rem;
      margin-left: -1rem;
      margin-top: -1rem;
    }

    .jia {
      width: 3rem;
      height: 3rem;
      position: fixed;
      left: 80%;
      top: 70%;
    }

    .show {
      width: 4.1rem;
      height: 2.95rem;
      position: fixed;
      left: 70%;
      top: 60%;
    }

    .fa {
      width: 100%;
      height: 100%;

    }

    .show_two {
      position: relative
    }

    .publish1 {
      display: flex;
      position: absolute;
      align-items: center;
      left: 0.575rem;
      top: 0.325rem;
    }

    .publish2 {
      display: flex;
      align-items: center;
      position: absolute;
      left: 0.575rem;
      top: 1.325rem;
    }

    .allLun {
      height: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 0.75rem;
      font-weight: 600;

    }

    .hui {
      display: flex;
      flex-direction: column;

    }

    .fixed-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      background: white;
      box-shadow: 0 -0.02rem 0.1rem 0 rgba(222, 228, 234, 0.8);
      padding: 0 15px;
    }

    .fixed-bottom img {
      width: 34px;
      height: 34px;
    }

    .fixed-bottom .info1 {
      flex: 1;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      height: 34px;
      margin-left: 10px;
    }

    .info1 .info-top {
      color: #3B3B3B;
      font-size: 13px;
    }

    .info1 .info-bottom {
      color: #989898;
      font-size: 11px;
    }

    .btn-download {
      width: 70px;
      height: 29px;
      text-align: center;
      line-height: 29px;
      background: #F96B47;
      border-radius: 14.5px;
      color: #FFFFFF;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>

    <div class="article">
      <div class="center">
        <div class="tou_left">
          <img :src=info.user_image onerror="this.src='/static/admin/jingtaiwu/logo1.png'" class="tou">
          <div class="city_name" v-if="info.user_level==2">
            <img src="/static/admin/jingtaiwu/main1/bg.png" class="city_bg">
            <span class="city_bg_con">城市合伙人</span>
          </div>
        </div>
        <div class="info_right">
          <div style="color:#333333;font-size:0.7rem;font-weight: bold">{{info.user_username}}</div>
          <div style="color:#666666;font-size: 0.55rem;margin-bottom: 0.45rem">{{info.post_add_time}}
          </div>
          <div style="color:#666666;font-size: 0.6rem" class="shop_name">
            {{info.shop_name}}</span>
          </div>
        </div>
      </div>
      <div class="article_con" v-if='info.post_type==1'>
        <div style="margin-bottom:0.4rem;" v-html='info.post_content'>
         
        </div>
        <div class="goods_pic1" v-if="info.post_link&&info.post_link.split(',').length<=2">
          <img :src=item1 @click.stop="openPic(item1)" v-if="info.post_link.split(',').length==2"
            v-for="item1,index in info.post_link.split(',')" style="width:8.15rem;height: 8.15rem;">
          <img :src=item1 @click.stop="openPic(item1)" v-if="info.post_link.split(',').length==1"
            v-for="item1,index in info.post_link.split(',')" style="width:10rem;height: 10rem;">
        </div>
        <div class="goods_pic" v-if="info.post_link&&info.post_link.split(',').length>2">
          <img :src=item1 @click.stop="openPic(item1)" v-for="item1,index in info.post_link.split(',')"
            style="width:5.3rem;height:5.3rem;margin-bottom:0.3rem;margin-left:0.15rem;">
        </div>
      </div>
      <div class="article_con" v-if='info.post_type==2'>
        <div style="margin-bottom:0.4rem;" v-html='info.post_content'>
         
        </div>
        <div class="goods_pic">
          <div class="pic_can">
            <video id='vedio' :src="info.post_link"  :poster="info.post_link | videoCover"></video>
            <img @click.stop="openVideo(info.post_link)" src="/static/admin/jingtaiwu/main1/bo.png" class="play" v-if='show'>
          </div>
        </div>
      </div>
      <div class="article_con" v-if='info.post_type==3'>
        <div style="margin-bottom:0.4rem;" v-html='info.post_content'>
          
        </div>
      </div>
      <div class="hr1"></div>
      <div class="bottom">
        <div class="lun">
          <img src="/static/admin/jingtaiwu/main1/zhuan.png" style="width:0.75rem;height: 0.7rem;margin-right: 0.4rem">
          <span>{{info.post_share}}</span>
        </div>
        <div class="lun">
          <img src="/static/admin/jingtaiwu/main1/shang1.png" v-if="info.is_share"
            style="width:0.7rem;height: 0.7rem;margin-right: 0.4rem">
          <img src="/static/admin/jingtaiwu/main1/shan.png" v-else
            style="width:0.7rem;height: 0.7rem;margin-right: 0.4rem">
          <span v-if="info.is_share" v-else style="color:#FF5E00">{{info.post_give}}</span>
          <span v-else>{{info.post_give}}</span>
        </div>
        <div class="lun">
          <img src="/static/admin/jingtaiwu/main1/wen.png" style="width:0.75rem;height:0.65rem;margin-right: 0.4rem">
          <span>{{info.post_comment}}</span>
        </div>
        <div class="lun">
          <img src="/static/admin/jingtaiwu/main1/zan2.png" v-if="info.is_like"
            style="width:0.65rem;height:0.7rem;margin-right: 0.4rem">
          <img src="/static/admin/jingtaiwu/main1/zna.png" v-else
            style="width:0.65rem;height:0.7rem;margin-right: 0.4rem">
          <span v-if="info.is_like" style="color:#FF5E00">{{info.post_praise}}</span>
          <span v-else>{{info.post_praise}}</span>
        </div>
      </div>
      <div class="hr"></div>
      <div class="allLun">
        全部评论
      </div>
      <div class="hr1"></div>
      <div
        style="display:flex;margin-top: 0.6rem;margin-bottom: 1rem; padding-left: 0.75rem; padding-right: 0.75rem;width: 100%;"
        v-for='item in list'>
        <img :src=item.user_image style="width:2rem;height:2rem;border-radius:50%;margin-right: 0.4rem"
          onerror="this.src='/static/admin/jingtaiwu/logo1.png'">
        <div style="display:flex;justify-content: space-between;width: 100%">
          <div class="hui">
            <div style="display:flex;align-items: center;justify-content: space-between;width: 100%">
              <div style="font-size:0.7rem;color:#333;font-weight:bold;margin-bottom: 0.2rem">{{item.user_name}}</div>
            </div>
            <div style="color:#999999;font-size:0.6rem;margin-bottom: 0.6rem">{{item.comment_time}}</div>
            <div style="font-size:0.7rem;color: #333" v-if='item.comment_type==1'>{{item.comment_content}}</div>
            <div style="font-size:0.7rem;color: #333" v-if='item.comment_type==2'>回复<span
                style="color:#F96B47">{{item.reply_user_name}}</span><span>:{{item.comment_content}}</span></div>
          </div>
          <img src="/static/admin/jingtaiwu/main1/wen.png" style="width:0.75rem;height:0.65rem;">
        </div>
      </div>
    </div>
    <div class="fixed-bottom">
      <img src="https://jintianjifen.oss-cn-shanghai.aliyuncs.com/f53953806ed6e7296fc76890aff4b7c9.jpg" alt="">
      <div class="info1">
        <div class="info-top">支分宝</div>
        <div class="info-bottom">支分宝享品质生活</div>
      </div>
      <div class="btn-download" onclick="tz()">立即下载</div>
    </div>
  </div>
</body>
<script type="text/javascript" src="/static/admin/jingtaiwu/api.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/utils.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/swiper.min.js"></script>
<script src="/static/admin/jingtaiwu/vue.min.js"></script>
<script src="/static/admin/jingtaiwu/vue-extend.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/common1.js?t=12312312312"></script>
<script>
  var vm;

  window.onload = function () {
    vm = new Vue({
      el: '#app',
      data: {
        info: {},
        list: [],
        post_id: getQueryVariable('post_id'),
        show:true,
      },
      methods: {
        // 初始化
        initData: function () {
          var _this = this;
          var data = {
            values: {
              post_id: this.post_id,
            }
          };
          postAjax(ApiUrl.apiuserpostDetail, data, function (res, err) {
            if (res.status == 200) {
              _this.info = res.msg;
            }
          });
        },
        // 评论列表
        getComment: function () {
          var _this = this;
          var params = {
            values: {
              user_id: 13,
              post_id: this.post_id,
              page: 1
            }
          };
          postAjax(ApiUrl.apiusergetComment, params, function (res, err) {
            if (res.status == 200) {
              _this.list = res.msg;
            } else {

            }
          });

        },
        // 视频播放
        openVideo: function (src) {
          //赋值
          $("#vedio").attr("src", src);
          document.getElementById("vedio").play();
          this.show=false
          document.getElementById("vedio").onended=function(){ vm.show=true};
          
        },
        end:function(){
            alert(123)
        },
        // 打开图片
        // openPic: function (img, index) {
        //   openBrowserView(img.split(','), index);
        //   window.open(img.split(','))
        // },
        openPic: function (img) {
          window.open(img)
        },
      },
      mounted: function () {
        this.initData();
        this.getComment();
      }
    });
  };
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return false;
  }

  function tz() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      var loadDateTime = new Date();
      window.setTimeout(function () {
        var timeOutDateTime = new Date();
        if (timeOutDateTime - loadDateTime < 5000) {
          window.location = 'itms-apps://itunes.apple.com/cn/app/wei/id414478124';
        } else {
          window.close();
        }
      }, 300);
    } else {
      window.setTimeout(function () {
        window.location.href = 'https://csdl.jintianjifen.cn/zhifenbao.apk';
      }, 300);
    }
  }
</script>

</html>